<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static 'css/pickout.css' %}"/>
    <link rel="stylesheet"  href="{% static 'fonts/iconfont.css' %}"/>
    <link rel="stylesheet" href="{% static 'font-awesome/css/font-awesome.css' %}"/>
    <script type="text/javascript" src="{% static 'js/charts/highcharts.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            line-height: 2.7;
        }

        .hello {
            font-weight: 200;
            font-size: 1.05em;
            font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
        }

    </style>

</head>
<body>
<div id="container" style="max-width:800px;height:400px" data-highcharts-chart="0">
    <div id="highcharts-zwpe8rz-0" dir="ltr" class="highcharts-container "
         style="position: relative; overflow: hidden; width: 304px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

    </div>
</div>

<!--</p>-->
<script>
    var newList = JSON.parse('{{ equitments|safe }}');
    str1 = JSON.stringify(newList);
    console.log(str1);
    var mychart = [];
    $.each(newList, function (i, item) {
        mychart.push({
            name: item.key.name,
            data: item.key.val,
            color:item.key.color
        });
            });
        var chart = Highcharts.chart('container', {
            title: {
                text: '2018 年xxxxx变化情况'
            },
            subtitle: {
                text: "后台系统：xxxx变化表"
            },
            yAxis: {
                title: {
                    text: '数量（个）'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 0
                }
            },
            series: mychart,
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

</script>
<div>

</div>
</body>
</html>